<!--负责 HTML 结构的部分，所有展示的内容都在这里定义。-->
<template>
  <h1>ref()</h1>
  <h2>欢迎来到：{{ webInfoRef.name }}</h2>
  <h3>作者：{{ webInfoRef.author }}</h3>
  <h3>userCt：{{ webInfoRef.userCt }}</h3>

  <button @click="randomRef">testRef</button>

  <h1>reactive</h1>
  <h2>欢迎来到：{{ webInfo.name }}</h2>
  <h3>作者：{{ webInfo.author }}</h3>
  <h3>userCt：{{ webInfo.userCt }}</h3>
  <button @click="testReactive">testReactive</button>

  <p>用户总数{{ userCtTotal }}</p>



</template>

<!--逻辑的“后台”，数据、方法和生命周期钩子全在这里，`JavaScript`的代码就编写在这个标签下。-->
<script setup>
import {computed, reactive, ref, watch} from "vue";

const webInfoRef = ref({
  name: "方才coding-ref",
  author: "方才",
  userCt: 12
})
// 只能使用let修饰符，因为在下面的方法中会导致引用值的改变
let webInfo = reactive({
  name: "方才coding-reactive",
  author: "方才",
  userCt: 13
})

const randomRef = () => {
  webInfoRef.value = {name: "randomRef 替换了" + Math.random()}
  webInfoRef.value.userCt = Math.ceil(Math.random() * 10);
}

const testReactive = () => {
  webInfo.name = "testReactive 替换了" + Math.random()
  webInfo.userCt = Math.ceil(Math.random() * 10);
}

const userCtTotal = computed(() => webInfo.userCt + webInfoRef.value.userCt)

watch(
    // 第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组；
    userCtTotal,
     // 回调函数，默认提供变化前后的参数
    (newValue, oldValue) => {
      let msg = `用户总数变化啦！变化前：【${oldValue}】，变化后：【${newValue}】`;
      alert(msg)
    },
    // 三个可选参数
    {immediate: true, deep: true, once: true}
)
</script>

<!--用``CSS``定义组件样式，加上``scoped``后样式只会在这个组件内生效，不会影响别的地方。-->
<style scoped>
h1 {
  color: goldenrod;
}

</style>
